<template>
  <div class="fooder">
    <div class="fooder-main">
      <div class="footerLink1">
        <router-link class="footerdianji"  to="/home">
          <div class="iconfont swtIcon">
            &#xe87e;
            <div class="number"><span v-for="i of numArr">{{i}}</span></div>
          </div>
<em class="tiwen">悄悄提问</em>
        </router-link>
      </div>
      <div class="footerLink2"> <i class="iconfont phoneIcon">&#xe873;</i><em class="tiwen">拨打电话</em></div>
      <div class="footerLink3"> <i class="iconfont swtIcon1">&#xe877;</i><em class="youhui">优惠活动</em></div>
      <div class="footerLink4"> <i class="iconfont swtIcon1">&#xe87b;</i><em class="youhui">首页</em></div>
    </div>
  </div>
</template>

<script>
  export default  {
    name: 'Fooder',
    data()  {
      return  {
         numArr: Number
      }

    },
    methods:{
        perNum() {
        let $random2 = parseInt(Math.random() * 11) + 80;
        this.numArr = String($random2);
        setTimeout(this.perNum, 2000);
      }
    }
    ,created(){
      this.perNum();
    }



  }
</script>

<style>
  .fooder{
    position: fixed;
    bottom: 0px;
    left: 0%;
    background: #ccc;
    width:100%;
  }
  .fooder-main{
    display: flex;
    width:100%;
  }
  .footerLink1{
    flex: 30%;padding: .1rem 0;    text-align: center;
    background-color: #ff6005;
  }
    .swtIcon{position: relative;}
    .number{
       font-size: 0.12rem;

      position: absolute;
      vertical-align:text-top;
      top: 0px;
       right: -0.1rem;
      background: #f00;
      border-radius: 100%;
      text-align: center;
      padding: .03rem;
    }
    .tiwen{color:#fff;font-size:.16rem;vertical-align:text-top;    padding-top: 0.05rem;
    display: inline-block;}
  .footerLink2{
    flex: 30%;padding: .1rem 0;    text-align: center;
    background-color: #26c540;
  }
  .footerLink3{
    flex: 20%;    padding: .02rem 0;
    background: #ca0b2b;text-align: center;
  }
  .youhui{color:#fff;font-size:.14rem;display: block;}
.footerLink4{
  flex: 20%;text-align: center;
  background-color: #2e3642;
}
.swtIcon1{font-size:.24rem;color:#fff;   }
  .swtIcon,.phoneIcon{font-size:.3rem;color:#fff;      display: inline-block;  text-align: center;}
</style>
